<template>
  <div class="mod-config">
    <el-card class="box-card search-input" shadow="never">
      <el-form label-width="120px" size="mini" :model="dataForm" @keyup.enter.native="findPage()">
        <el-col :span="6">
          <el-form-item label="商家编码：" prop="number">
            <el-input v-model="dataForm.number" ></el-input>
          </el-form-item>
        </el-col>
        <!--<el-col :span="6">-->
        <!--<el-form-item label="商家手机号：" prop="mobile">-->
        <!--<el-input v-model="dataForm.mobile"></el-input>-->
        <!--</el-form-item>-->
        <!--</el-col>-->
        <el-col :span="6">
          <el-form-item label="商家名称：" prop="name">
            <el-input v-model="dataForm.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="商家状态：" prop="isBan">
            <el-select v-model="dataForm.isBan" style="width: 100%">
              <el-option
                v-for="item in isBanStatus"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24" style="text-align: center;">
          <el-form-item label-width="0px">
            <el-button  type="primary" @click="$refs.CyTable.query(dataForm)">查询</el-button>
            <el-button @click="reset('dataForm')">重置</el-button>
            <el-button type="warning"  @click="SyncShop()">同步商家</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-card>
    <cy-table
      v-loading="loading"
      url="/api/v1/broadcast/shopInfo"
      :showBatchDelete="false"
      :showSelection="false"
      :max-height="500"
      :highlightCurrentRow="true"
      :operationWidth="300"
      :totalSize="totalSize"
      :columns="filterColumns"
      :showDetailOperation="true"
      :showEditOperation="false"
      :showDeleteOperation="true"
      :showCheckCustomOperation="true"
      showCheckCustomLabel="status"
      showCheckCustomLabelVal="6/8"
      customBtbLable="禁播/取消禁播"
      @handleDelete="handleDelete"
      @findPage="findPage"
      @handleEdit="handleEdit"
      @handleDetail="handleDetail"
      @handleBtbCustom="handleBtbCustom"
      ref="CyTable">
    </cy-table>
    <el-dialog
      width="30%"
      title="商家详情"
      :close-on-click-modal="false"
      :visible.sync="dialogVisibleDetail">
      <el-card class="box-card" shadow="never">
        <el-form  label-width="120px"  size="mini" :model="DetailDataForm" @keyup.enter.native="findPage()">
          <el-col :span="24">
            <el-form-item label="商家名称：" prop="name">
              <el-input disabled v-model="DetailDataForm.name" ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="商户编码：" prop="number">
              <el-input disabled v-model="DetailDataForm.number"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="商户手机号：" prop="mobile">
              <el-input disabled v-model="DetailDataForm.mobile"></el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </el-card>
    </el-dialog>
  </div>
</template>
<script>
  import CyTable from "./component/CyTable";
  export default {
    components: {
      CyTable
    },
    data() {
      return {
        detailData:{
          liveInfos:{
            rows:[]
          }
        },
        DetailDataForm:"",
        liveButtonStatus:0,
        dialogImageUrl: '',
        disabled: false,
        dialogVisibleImg: false,
        prizeTypeVal:-1,
        typeVal:-1,
        loading: false,
        moreBtnDisable: true,
        dataForm: {
        },
        columns: [],
        filterColumns: [],
        pageRequest: { pageNum: 1, pageSize: 10 },
        totalSize: 0,
        operation: false, // true:新增, false:编辑
        dialogVisible: false, // 新增编辑界面是否显示
        editLoading: false,
        isBanStatus: [{
          label: '全部'
        },{
          value: '0',
          label: '正常'
        },{
          value: '1',
          label: '禁播'
        }],
        countNumForm: {
          allShopNum: '',
          onlineNum: '',
          offlineNum: ''
        },
        dataList: [],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dataListLoading: false,
        exportConfirmFlag: false,
        dataListSelections: [],
        invoiceUpdateVisible: true,
        dialogVisibleDetail:false,
        rules : {

        },
      }
    },
    mounted: function () {
      this.columns = [
        { prop: "id", label: "商家ID", minWidth: 120 },
        { prop: "number", label: "商家编码", minWidth: 120 },
        { prop: "name", label: "商家名称", minWidth: 120},
        { prop: "mobile", label: "手机号", minWidth: 120},
        { prop: "statusVal", label: "商家状态", minWidth: 120},
      ];
      let temp = [];
      this.columns.forEach(function(key, val) {
        temp.push(key);
      });
      this.filterColumns = temp;
    },
    methods: {
      SyncShop(){
        this.$confirm("该操作会更新所有商家信息，确认操作吗？", "提示", {}).then(() => {
          this.utils.request.liveRequest({
            url: '/api/v1/broadcast/shop',
            method: 'get',
          }).then(result => {
            if( result.data.code==0){
              this.$message({message: "同步商家列表成功", type: "success"});
              this.findPage();
            }else{
              this.$message({message: "同步商家列表失败", type: "success"});
            }
          })
        })
      },
      handleRemove(file) {
        console.log(file);
      },
      handleDownload(file) {
        console.log(file);
      },
      // 获取数据列表
      findPage() {
        this.$refs.CyTable.findPage(this.dataForm);
      },
      // 每页数
      sizeChangeHandle(val) {
        this.pageSize = val
        this.pageIndex = 1
        this.findPage()
      },
      //将查询结果导出
      exportConfirm() {
        this.exportConfirmFlag = true;
        this.getDetailList();
      },

      getDetailList() {
        if (this.exportConfirmFlag) {
          //门店列表导出
          this.auditExport();
          // this.findPage();
        }
        this.dataListLoading = false
      },
      //重置
      reset(formName) {
        this.dataForm={};
        this.$refs.CyTable.resetForm(this.dataForm);
      },
      // 当前页
      currentChangeHandle(val) {
        this.pageIndex = val
        this.findPage()
      },
      // 多选
      selectionChangeHandle(val) {
        this.dataListSelections = val
        if (this.dataListSelections.length > 0) {
          this.moreBtnDisable = false
        } else {
          this.moreBtnDisable = true
        }
      },
      // 显示编辑界面
      handleEdit: function(params) {
        this.dialogVisible = true;
        this.operation = false;
        this.dataForm = Object.assign({}, params.row);
        this.$nextTick(() => {
          if (this.$refs['dataForm']!==undefined) {
            this.$refs['dataForm'].clearValidate();
          }
        });
      },
      handleDetail: function (params) {

        let id = params.row.id;
        let param = {"id": id};
        this.utils.request.liveRequest({
          url: '/api/v1/broadcast/shopInfo/'+id,
          method: 'get',
          params: param
        }).then(result => {
          this.DetailDataForm = result.data.data;
          this.$forceUpdate();
        })
        this.dialogVisibleDetail = true;
      },
      // 删除
      handleDelete: function (params) {
        let ids = params.params;
        let delDataForm = [];
        ids.forEach(val => {
          delDataForm.push(val)
        })
        if (delDataForm.length > 0) {
          let this_ = this;
          this.utils.request.liveRequest({
            url: '/api/v1/broadcast/shopInfo/batchDelete',
            method: 'post',
            params: delDataForm
          }).then(result => {
            let data = result.data;
            if (data.code === '0') {
              this.$message({message: "操作成功", type: "success"});
              this_.$refs.CyTable.findPage(this_.dataForm)
              this_.$forceUpdate();
            }
          })
        } else {
          this.$message({message: "请选择需要删除的数据", type: "info"});
        }

      },
      //自定义按钮
      handleBtbCustom:function(params){
        let status = params.row.status;
        let banAnchor="确认取消禁播该商家吗？";
        if(status==6){
          banAnchor="确认禁播该商家吗？";
        }
        this.$confirm(banAnchor, "提示", {}).then(() => {
          this.loading=true;
          let id = params.row.id;
          let param = {"id": id,"status":params.row.status};
          let this_ = this;
          this.utils.request.liveRequest({
            url: '/api/v1/broadcast/banShopInfo',
            method: 'post',
            params: param
          }).then(result => {
            let data = result.data;
            if (data.code === '0') {
              this.$message({message: "操作成功", type: "success"});
              this.loading=false;
              this_.$refs.CyTable.findPage(this_.dataForm)
              this_.$forceUpdate();
            }
          })
        });
      },
    }
  }
</script>
<style scoped lang="scss">

</style>
